<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!doctype html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" href="css/style.css" type="text/css"/>
        <link rel="stylesheet" href="css/bootstrap.css" type="text/css"/>
        <link rel="stylesheet" href="css/bootstrap-responsive.css" type="text/css"/>        

        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/libs/jqueryui-1.8.16/jquery-ui.js"></script>
        <script type="text/javascript" src="js/about.js"></script>

        <style type="text/css">
            body {
                padding-top: 60px;
                padding-bottom: 40px;
            }
        </style>

        <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

        <title>Project Easel Demo - HTML5, jQuery, REST</title>
    </head>
    <body>
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container-fluid">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </a>
                    <a class="brand" href="#">Project name</a>

                    <div class="btn-group pull-right">
                        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="icon-user"></i> Username
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Profile</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Sign Out</a></li>
                        </ul>
                    </div>
                    <div class="nav-collapse">
                        <ul class="nav">
                            <li><a href="index.html">Home</a></li>
                            <li class="active"><a href="about.html">About</a></li>
                            <li><a href="tableui.html">Rest Client</a></li>
                            <li><a href="#contact">Contact</a></li>
                        </ul>
                    </div><!--/.nav-collapse -->
                </div>
            </div>
        </div>

        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span9">
                    <div class="hero-unit">
                        <div id="rest">
                            <p>REST sample will go in here<br/>
                                <a class="btn" id="loadRestBtn" onclick="loadRest()">Load REST Data</a>
                            </p>
                        </div>
                        <div id='restDetails' class='restDetails'>
                            <table>
                                <tr><td id="restName"></td></tr>
                                <tr><td id="restRep"></td></tr>
                                <tr><td id="restEmail"></td></tr>
                                <tr><td id="restPhone"></td></tr>
                            </table>
                            <p>
                                <a class='btn' onclick='dataSwitch()'>&laquo; Return</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row-fluid">

                <!-- This is the drag and drop code -->
                <div id="DandD_div" class="span3"> 
                    <p id="draganddrop" class="fancy">HTML5 Drag and Drop example:  Drag the kitten up to visit the bunny.</p>
                    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
                        <img id="drop1" src="img/rabbit3.jpg" width="100" height="100" style="padding: 10px" />
                    </div>
                    <img id="drag1" src="img/kitten1.jpg" draggable="true" ondragstart="drag(event)" width="100" height="120" style="padding: 10px" />
                </div>

                <!-- 
                //  jQuery animation example section
                //  All javascript for the animations is in about.js
                -->
                <div class="span4">
                    <p id="jquery" class="fancy">A simple jQuery animation</p>
                    <button id="start">Start Me Up!</button>
                    <div id="animation-div"  style="background-color: blueviolet; position: relative; width: 100px; height: 100px" >
                    </div>
                </div>
                <div class="span4">
                    <p id="show_hide" class="fancy">Div transition</p>
                    <button id="switch">Switch!</button>
                    <div id="blue_div"  style="background-color: blue; position: relative; width: 100px; height: 100px"></div>
                    <div id="red_div"  style="display: none; background-color: red; position: relative; width: 100px; height: 100px"></div>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span4">
                    <div id="jsonp_test" style="position: relative;"><a class="btn tweet-window" href="#tweetBox" >Newest JavaOne Tweet</a></div>
                </div>
            </div>
        </div>

        <div id="tweetBox" class="tweet-popup">
            <a href='#' class='tweet-close'><img src='css/images/close_pop.png' class='btn_close' title='Close Window' alt='Close' /></a>
            <form method='post' class='signin' action='#'>
                <fieldset class='tweetbox'>
                    <label>
                        <span><img id="tweetImg" class='avatar' src=''/></span>
                    </label>
                    <label>
                        <span id="tweetUsername" class='username'></span>
                        <span id="tweetUser" style="font-size: 12px;"></span>
                    </label>
                    <label>
                        <textarea id="tweetText" cols='20' rows='7' readonly='readonly'></textarea>
                    </label>
                </fieldset>
            </form>
        </div>

        <script type="text/javascript" src="js/draganddrop.js"></script>
        <script src="js/bootstrap-dropdown.js"></script>
        <script src="js/bootstrap-collapse.js"></script>
    </body>
</html>
